/**
 * Created by 小敏哥 on 2017/11/28.
 */

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Link} from 'react-router';
import {getOrderDetailInit} from '../../actions/orderDetailAction';
import StatusBar from '../../../../../../src/js/components/statusBar';
import style from './index.scss'
import ItemList from '../../../../../../src/js/components/itemList';
import ProcessItem from '../../../../../../src/js/components/process/processItem';
import common from '../../../../../js/utils/common'

class OrderDetail extends Component {
    constructor(props) {
        super(props);
    }


    componentDidMount() {
        common.setViewTitle('订单详情');
        this.props.dispatch(getOrderDetailInit({
            orderId: this.props.params.orderId,
            chargeOrderId: this.props.params.chargeOrderId,
        }))
    }


    //构建订单状态进程文字
    structBarData(status) {
        switch (status) {
            case 2:
                return {status: 1, content: [{text: '提交订单'}, {text: '处理订单'}, {text: '订单完成'}]}
            case 3:
                return {status: 1, content: [{text: '提交订单'}, {text: '办理失败', isError: true}, {text: '订单关闭'}]};
            case 4:
                return {
                    status: 2,
                    content: [{text: '提交订单'}, {text: '办理失败', isError: true}, {text: '订单关闭', isError: true}]
                };
            case 5:
                return {
                    status: 2,
                    content: [{text: '提交订单'}, {text: '办理失败', isError: true}, {text: '订单已失效', isError: true}]
                };
            case 8:
                return {status: 2, content: [{text: '提交订单'}, {text: '处理订单'}, {text: '订单完成'}]};
        }
    }

    render() {
        if (this.props.orderDetailInit) {
            let {cardName, cardNbr, address, urgentLinkMen, urgentLinkTel, statusDesc, statusDescDetail, processlist, orderId, createTime, status,completeTime} = this.props.orderDetailInit;
            let updateDay = common.transfromDateTime(new Date(processlist[processlist.length-1].updateTime));
            let orderCreateTime = common.transfromDateTime(new Date(createTime));
            let processTitle = processlist[processlist.length-1].name;
            let statusBarData = this.structBarData(status);
            return <div className={style.orderDetail}>
                <div className={style.barContent}>
                    <StatusBar status={statusBarData.status} statusArray={statusBarData.content}/>
                </div>

                <div className={style.statusMessage}>
                    <div className={style.statusTitle}>
                        {(status == 3 || status == 4 || status == 5) ? <img src="./images/error_icon.png"/> :
                            <img src="./images/success_icon.png"/>}
                        <span>{statusDesc}</span>
                    </div>
                    <p className={style.content}>{statusDescDetail}</p>
                </div>

                <p className={style.title}><img className={style.green} src="./images/Rectangle 2.png"/><span>订单内容</span></p>
                <div className={style.orderMessage}>
                    <ItemList borderPaddingLeft="0.3rem">
                        <div className={style.messageItem}>
                            <div>
                                <div>申请人</div>
                                <div>{cardName}</div>
                            </div>
                            <div>
                                <div>公民身份证号码</div>
                                <div>{common.hideString(cardNbr, cardNbr.length-5)}</div>
                            </div>
                        </div>
                        <div className={style.messageItem}>
                            <div>
                                <div>收件人</div>
                                <div>{address.contactName}</div>
                            </div>
                            <div>
                                <div>收件人电话</div>
                                <div>{address.cellNum}</div>
                            </div>
                            <div>
                                <div>收件人地址</div>
                                <p>{address.fullAddr}</p></div>
                        </div>
                        <div className={style.messageItem}>
                            <div>
                                <div>紧急联系人</div>
                                <div>{urgentLinkMen}</div>
                            </div>
                            <div>
                                <div>紧急联系人电话</div>
                                <div>{urgentLinkTel}</div>
                            </div>
                        </div>
                        <div className={style.messageItem}>如需邮费发票请向上门送证的邮政速递人员索取</div>
                    </ItemList>
                </div>

                <p className={style.title}><img className={style.green} src="./images/Rectangle 2.png"/>
                    <span>办理进度</span><Link
                        to="processDetail">查看进度详情</Link><img className={style.go} src="./images/go.png"/></p>
                <div className={style.processContainer}>
                    <ProcessItem statusType="current" content={processTitle} time={updateDay} lineHeight="0.8rem"/>
                </div>

                <p className={style.title}><img className={style.green} src="./images/Rectangle 2.png"/> 办理说明</p>
                <div className={style.howTodo}>
                    <div className={style.imgs}>
                        <img src="./images/complete.png"/>
                        <img src="./images/table.png"/>
                        <img src="./images/idCard.png"/>
                        <img src="./images/arrive.png"/>
                    </div>
                    <div className={style.text}>
                        <div>提交订单</div>
                        <div>前台申办</div>
                        <div>送审制证</div>
                        <div>出证送达</div>
                    </div>
                </div>

                <p className={style.title}><img className={style.green} src="./images/Rectangle 2.png"/> 订单详情</p>
                <div className={style.orderDetailMessage}>
                    <div className={style.messageItem}>
                        <div>
                            <div>订单编号</div>
                            <div>{orderId}</div>
                        </div>
                        <div>
                            <div>支付方式</div>
                            <div>线下到付</div>
                        </div>
                        <div>
                            <div>创建时间</div>
                            <div>{orderCreateTime}</div>
                        </div>
                        {
                            (status == 8 || status == 4) ? <div>
                                <div>{status==8?'完成时间':'关闭时间'}</div>
                                <div>{common.transfromDateTime(new Date(completeTime))}</div>
                            </div> : ''
                        }
                    </div>
                </div>

              {/*  <div className={style.bottomMessage}>
                    <img src="./images/EMSlogo.png"/>
                    <div>EMS客服热线：020-11183</div>
                </div>*/}
            </div>
        }
        else {
            return <div></div>
        }
    }
}

OrderDetail.contextTypes = {
    router: React.PropTypes.object.isRequired
};


function mapStateToProps(state) {
    return Object.assign({}, state.orderDetailInfo);
}


export default connect(mapStateToProps)(OrderDetail);